<template>
	<!-- input -->
	<div class="content-container">
		<el-container class="content-row">
			<div class="input-tip">商品名称：</div>
			<div class="input-field">
				<el-input v-model="queryModel.name"></el-input>
			</div>
			<div class="input-tip">商品编号：</div>
			<div class="input-field">
				<el-input v-model="queryModel.id"></el-input>
			</div>
			<div class="input-tip">商品分类：</div>
			<div class="input-field">
				<el-select v-model="queryModel.category" placeholder="请选择分类">
					<el-option v-for="(item, index) in categories" :key="index" :value="index" :index="index" :label="item"></el-option>
				</el-select>
			</div>
		</el-container>
		<el-container class="content-row">
			<div class="input-tip">是否上架：</div>
			<div class="input-field">
				<el-select v-model="queryModel.sellModeString" placeholder="请选择分类">
					<el-option v-for="(item, index) in sellModes" :key="index" :value="index" :index="index" :label="item"></el-option>
				</el-select>
			</div>
			<div class="input-tip">是否过期：</div>
			<div class="input-field">
				<el-select v-model="queryModel.expireModeString" placeholder="请选择分类">
					<el-option v-for="(item, index) in expireModes" :key="index" :value="index" :index="index" :label="item"></el-option>
				</el-select>
			</div>
		</el-container>
		<el-button-group>
			<el-button type="primary" @click="queryData">筛选</el-button>
			<el-button type="primary" @click="clear">显示全部</el-button>
			<el-button type="success" @click="addGoods">新增商品</el-button>
		</el-button-group>
		<!-- list -->
		<div>
			<el-table
				:data="goodsData"
				tooltip-effect="dark"
				style="width: 100%">
				<el-table-column
					label="商品"
					width="100">
					<template #default="scope">
						<div style="text-align:center">
							<el-image :src="scope.row.img" style="width: 60px; height: 100px"/>
						</div>
						<div style="text-align:center">{{ scope.row.name }}</div>
					</template>
				</el-table-column>
				<el-table-column
					label="价格"
					width="100"
					prop="price">
				</el-table-column>
				<el-table-column
					label="销量"
					width="100"
					prop="sellCount">
				</el-table-column>
				<el-table-column
					label="库存"
					width="100"
					prop="count">
				</el-table-column>
				<el-table-column
					label="退款数量"
					width="100"
					prop="back">
				</el-table-column>
				<el-table-column
					label="退款金额"
					width="100"
					prop="backPrice">
				</el-table-column>
				<el-table-column
					label="操作"
					width="100"
					prop="name">
					<template #default="scope">
						<el-button @click="operate(scope.row)" :type="scope.row.state ? 'danger':'success'">
							{{ scope.row.state ? '下架' : '上架' }}
						</el-button>
					</template>
				</el-table-column>
				<el-table-column
					label="管理员"
					width="100"
					prop="owner">
				</el-table-column>
				<el-table-column
					label="更新时间"
					width="200"
					prop="time">
				</el-table-column>
			</el-table>
		</div>
	</div>
	<el-dialog title="添加商品" v-model="dialogVisible" :before-close="handleClose" top="5vh">
		<add-goods @cancel="cancel"></add-goods>
	</el-dialog>
</template>

<script>
import Mock from "@/tools/Mock";
import message from "@/tools/Message";
import AddGoods from "@/components/goods/AddGoods.vue";
import {ElMessageBox} from "element-plus";
export default {
	name: "GoodsComp",
	components: {
		AddGoods: AddGoods
	},
	data() {
		return {
			queryModel: {
				name: "",
				id: "",
				category: 0,
				sellModeString: 2,
				expireModeString: 2
			},
			sellModes: ["否", "是", "全部"],
			expireModes: ["否", "是", "全部"],
			goodsData: [],
			categories: ["全部", "男装", "女装"],
			dialogVisible: false
		}
	},
	props: ["type"],
	mounted() {
		this.goodsData = Mock.getGoods(this.type)
	},
	beforeRouteUpdate(to) {
		this.goodsData = Mock.getGoods(to.params.type)
	},
	methods: {
		queryData() {
			message.info("筛选数据：" + JSON.stringify(this.queryModel))
			this.goodsData = Mock.getGoods(this.type)
		},
		operate(item) {
			item.state = !item.state;
		},
		clear() {
			message.warning("清空筛选条件");
			this.queryModel = {
				name: "",
				id: "",
				category: "全部",
				sellModeString: 2,
				expireModeString: 2
			}
			this.goodsData = Mock.getGoods(this.type)
		},
		addGoods() {
			this.dialogVisible = true
		},
		cancel(){
			this.handleClose()
		},
		handleClose(done) {
			ElMessageBox.confirm('本次修改将不会保存，确定要关闭?', {
				confirmButtonText: "关闭",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				this.dialogVisible = false
				done()
			}).catch((err) => {{
				console.log(err)
			}})
		}
	}
}
</script>

<style scoped>

</style>